{include file="public/header" /}
<body>
<div class="header">
    <i class="layui-icon layui-icon-left" onclick="load_href('{:url(\'user/index\')}',2)"></i> 充值
    <a href="{:url('remit/record')}">充值记录</a>
</div>
<div class="recharge-price">
    <img src="/static/index/img/icon21.png" alt="">
    <div>
        <p>{:get_pay_way('currency')}余额</p>
        <p class="num">￥<span>{$user.assets.currency}</span></p>
    </div>
</div>
<div class="recharge-title">支付方式</div>
<ul class="recharge-nav flex-layout">
    <li class="active" data-type="bank">
        <p class="flex-center">
            <img src="/static/admin/img/bank.png" alt="">
        </p>
        <p>{:get_pay_way('bank')}</p>
        <img src="/static/index/img/icon22.png" alt="" class="img">
    </li>
    <li data-type="wechat">
        <p class="flex-center">
            <img src="/static/admin/img/wechat.png" alt="">
        </p>
        <p>{:get_pay_way('wechat')}</p>
        <img src="/static/index/img/icon22.png" alt="" class="check-img img">
    </li>
    <li data-type="alipay">
        <p class="flex-center">
            <img src="/static/admin/img/alipay.png" alt="">
        </p>
        <p>{:get_pay_way('alipay')}</p>
        <img src="/static/index/img/icon22.png" alt="" class="check-img img">
    </li>
</ul>
<div class="recharge-bank">
    <p>
        <span class="copy_content">{$system.remit_bank_number}</span>
        <span class="copy" data-clipboard-action="copy" data-clipboard-target=".copy_content" style="color: red">复制</span>
    </p>
    <div>
        <p class="flex-center">
            <img src="/static/index/img/icon17.png" alt="">
        </p>{$system.remit_bank_name} | {$system.remit_bank_account}
    </div>
    <div>
        <span>{$system.remit_bank_open}</span>
    </div>
</div>
<div class="recharge-imgs flex-center recharge-wechat" style="display: none">
    <p class="flex-center">
        <img class="images" src="{$system.usdt_img}" alt="">
    </p>
    <p>请扫码支付</p>
</div>
<div class="recharge-imgs flex-center recharge-alipay" style="display: none">
    <p class="flex-center">
        <img class="images" src="{$system.remit_alipay}" alt="">
    </p>
    <p>请扫码支付</p>
</div>
<form action="{:url('remit/save')}" method="post" class="form layui-form">
    <input type="hidden" name="account" value="currency">
    <input type="hidden" id="pay_way" name="pay_way" value="bank">
    <ul class="recharge-acc-list">
        <li>
            <p>充值金额</p>
            <div>￥
                <input type="number" name="amount" lay-verify="required" lay-reqtext="请输入充值金额"
                       placeholder="请输入充值金额，{$system.remit_min}起充" autocomplete="off">
            </div>
        </li>
        <li>
            <p>充值凭证</p>
            <div class="uploads_image" id="uploads_image">
                <img src="/static/index/img/icon15.png" alt="" id="image_show">
            </div>
            <input type="hidden" name="images" id="images_value" lay-verify="required" lay-reqtext="请上传充值凭证"
                   placeholder="请上传充值凭证"/>
        </li>
    </ul>
    <p class="save upd-save" lay-submit lay-filter="save" formObj=".form">提交</p>
</form>
</body>
{include file="public/footer" /}
<script src="/static/index/js/clipboard.min.js"></script>
<script>
    $(function () {
        $('.copy').click(function () {
            var clipboard = new ClipboardJS('.copy');
            layer.msg('已复制');
        });
        $('.recharge-nav li').click(function() {
            var type = $(this).attr('data-type');
            switch (type) {
                case "bank":
                    $('.recharge-bank').show();
                    $('.recharge-wechat').hide();
                    $('.recharge-alipay').hide();
                    break;
                case "wechat":
                    $('.recharge-bank').hide();
                    $('.recharge-wechat').show();
                    $('.recharge-alipay').hide();
                    break;
                case "alipay":
                    $('.recharge-bank').hide();
                    $('.recharge-wechat').hide();
                    $('.recharge-alipay').show();
                    break;
                default:
                    $('.recharge-bank').hide();
                    $('.recharge-wechat').hide();
                    $('.recharge-alipay').hide();
            }
            $('#pay_way').val(type);
            $(this).addClass('active').siblings().removeClass('active')
            $(this).find('.img').show().parent().siblings().find('.img').hide()
        });
        $('.images').click(function () {
            DataHtml('收款码', $(this).attr('src'))
        });
        function DataHtml(name, url) {
            layer.open({
                type: 1,
                title: false,
                closeBtn: 0,
                shadeClose: true,
                area: ['80%', 'auto'], //宽高
                content: "<img style='width: 100%' alt=" + name + " title=" + name + " src=" + url + " />"
            });
        }
    });
</script>
</html>